<template>
	<view class="personel">
		<view class="personel-bg">
			<image v-if="roleStatus == 0 || roleStatus == 1"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personel-bg1.png" mode="">
			</image>
			<image v-if="roleStatus == 2 || roleStatus == 3"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personel-bg2.png" mode="">
			</image>
		</view>
		<view class="personel-info ff-bg-fff ff-padding-left-20 ff-padding-top-10 ff-padding-bottom-10">
			<view class="personel-info-box ff-flex">
				<view class="personel-info-box-img ff-margin-right-12">
					<image v-if="roleStatus == 0 || roleStatus == 1"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personel-avatar.png"
						mode=""></image>
					<image v-if="roleStatus == 2 || roleStatus == 3"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/default_avatar.png"
						mode=""></image>
				</view>
				<view class="personel-info-box-content">
					<view v-if="roleStatus == 0 || roleStatus == 1">
						<view class="ff-color-000 ff-font-weight-600 ff-font-16 ff-margin-bottom-5">
							{{ userInfo.company.companyName }}
						</view>
						<view class="personel-info-box-content-tips ff-color-fff ff-font-12">
							{{ userInfo.company.companyTypeName }}
						</view>
					</view>
					<view v-if="roleStatus == 2 || roleStatus == 3">
						<view class="ff-color-000 ff-font-weight-600 ff-font-16 ff-margin-bottom-5">
							{{ userInfo.org.orgName }}
						</view>
						<view class="personel-info-box-content-tips ff-color-fff ff-font-12">技术服务机构</view>
					</view>
				</view>
			</view>
			<view>
				<view class="personel-name ff-font-13" v-if="roleStatus == 0 || roleStatus == 2">
					管理员：{{ userInfo.username }}&nbsp;{{ userInfo.phone }}</view>
				<view class="personel-name ff-font-13" v-if="roleStatus == 1 || roleStatus == 3">
					员工：{{ userInfo.username }}&nbsp;{{ userInfo.phone }}</view>
			</view>
		</view>
		<view class="personel-list">
			<view class="ff-bg-fff">
				<!-- 单位系列--- -->
				<view v-if="roleStatus == 0 || roleStatus == 1">
					<view v-if="roleStatus == 1" @click="personnelClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon2.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">个人信息</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view v-if="roleStatus == 0" @click="administratorsClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon2.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">管理员信息</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view @click="companyClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon3.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">单位信息</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view v-if="roleStatus == 1" @click="applyAdministratorsUnitClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon5.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">申请成为管理员</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view @click="complaintClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/complaintIcon.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">投诉建议</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
				</view>
				<!-- 机构系列--- -->
				<view v-if="roleStatus == 2 || roleStatus == 3">
					<view @click="updateFaceClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon6.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">比对公安人证信息</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view v-if="false" @click="spotTaskClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon7.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">抽查任务</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view v-if="roleStatus == 3" @click="personnelClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon2.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">个人信息</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view v-if="roleStatus == 2" @click="administratorsClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon2.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">管理员信息</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view @click="mechanismClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon3.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">机构信息</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view v-if="roleStatus == 3" @click="applyAdministratorsOrgClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon5.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">申请成为管理员</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
					<view @click="complaintClick"
						class="ff-flex-between ff-margin-left-20 ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
						<view class="ff-align-items-one">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/complaintIcon.png"
								mode=""></image>
							<view class="ff-font-14 ff-color-333 ff-margin-left-5">投诉建议</view>
						</view>
						<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
					</view>
				</view>
			</view>
			<view class="ff-bg-fff ff-margin-top-10" @click="helpWord">
				<view
					class="ff-margin-left-20 ff-flex-between ff-margin-right-20 ff-padding-top-15 ff-padding-bottom-15 ff-solid-bottom">
					<view class="ff-align-items-one">
						<image
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/personnel-icon4.png"
							mode=""></image>
						<view class="ff-font-14 ff-color-333 ff-margin-left-5">帮助文档</view>
					</view>
					<view><u-icon name="arrow-right" color="#CECECE" size="32"></u-icon></view>
				</view>
			</view>
		</view>
		<view class="ff-text-center personel-logout"><u-button @click="logout" shape="circle">退出登录</u-button></view>
		<!-- 退出登录 -->
		<u-modal v-model="logoutModal" title="退出账号" @confirm="logoutConfirm" show-cancel-button="true"
			content="请确认是否退出？" />
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'Personel',
		data() {
			return {
				userInfo: {}, // 个人信息
				logoutModal: false // 退出登录弹框
			};
		},
		computed: {
			...mapState({
				roleStatus: modules => modules.infoList.roleStatus
			})
		},
		mounted() {
			this.getUserInfo(); // 获取个人信息
		},
		methods: {
			...mapMutations(['changeTabberIndex']),
			// 实时刷新
			showLoading() {
				this.getUserInfo(); // 获取个人信息
			},
			// 下拉刷新
			downLoading() {
				let that = this;
				this.getUserInfo(); // 获取个人信息
				setTimeout(() => {
					that.$refs.uToast.show({
						title: '刷新成功',
						type: 'success'
					});
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 获取个人信息
			async getUserInfo() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/user/info'
				});
				// console.log('获取个人信息----', data);
				if (data.code == 200) {
					this.userInfo = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 跳转到比对公安人证信息页面
			updateFaceClick() {
				this.$pageJump.navigateTo('/pages/maintenance/public/personal/updateFace/updateFace');
			},
			// 跳转到个人信息页面
			personnelClick() {
				this.$pageJump.navigateTo('/pages/maintenance/public/personal/personalInfo/personalInfo');
			},
			// 跳转到管理员信息页面
			administratorsClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/public/personal/administratorsInfo/administratorsInfo');
			},
			// 跳转到单位信息页面
			companyClick() {
				this.$pageJump.navigateTo('/pages/maintenance/public/personal/companyInfo/companyInfo');
			},
			// 跳转到机构信息页面
			mechanismClick() {
				this.$pageJump.navigateTo('/pages/maintenance/public/personal/companyInfo/mechanismInfo');
			},
			// 单位---跳转到申请成为管理员页面
			applyAdministratorsUnitClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/public/personal/applyAdministrators/applyAdministratorsUnit');
			},
			// 机构---跳转到申请成为管理员页面
			applyAdministratorsOrgClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/public/personal/applyAdministrators/applyAdministratorsOrg');
			},
			// 跳转到投诉建议
			complaintClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/public/personal/complaintsSuggestions/index');
			},
			// 帮助文档
			helpWord() {
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: 'https://attach.sdhuan.cn/fire-zongdui/help4.0.pdf',
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								// console.log('打开文档成功');
								setTimeout(function() {
									uni.hideLoading();
								}, 100);
							}
						});
					}
				});
			},
			// 退出登录-------
			logout() {
				this.logoutModal = true; // 打开退出登录的弹框
			},
			logoutConfirm() {
				let that = this;
				that.$refs.loading.openLoading('退出中···'); // 打开loading动画
				that.$http.post({
					url: '/logout'
				}).then(res => {
					// console.log('退出操作返回的数据-----', res);
					that.$refs.loading.closeLoading();
					if (res.code == 200 && res.success) {
						if (that.userInfo.userType == 8) {
							getApp().closeScheduledTask(); // 关闭定时任务
							getApp().closeWebsocket(); // 关闭websocket任务
						}
						that.changeTabberIndex(0); // 底部导航栏Index默认为0
						uni.clearStorageSync(); // 清空本地所有的缓存数据
						that.$refs.uToast.show({
							title: '退出成功',
							type: 'success'
						});
						that.$pageJump.reLaunch('/pages/loginRegister/login/Login');
					} else {
						that.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.personel {
		&-bg {
			width: 100%;
			height: 330rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		&-info {
			position: relative;
			top: -140rpx;
			z-index: 8;

			&-box {
				&-img {
					position: relative;
					top: -50rpx;

					image {
						width: 130rpx;
						height: 130rpx;
					}
				}

				&-content {
					&-tips {
						display: inline-block;
						background-color: #3178ff;
						padding: 8rpx 14rpx;
						border-top-right-radius: 15rpx;
						border-bottom-left-radius: 15rpx;
						border-bottom-right-radius: 15rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

		&-name {
			position: absolute;
			bottom: 10%;
			color: #616369;
		}

		&-list {
			margin-top: -120rpx;

			image {
				width: 34rpx;
				height: 34rpx;
				padding-bottom: 4rpx;
			}
		}

		&-logout {
			width: 90%;
			margin: 15% 5% 10%;
		}
	}
</style>